import React, { PureComponent } from 'react'

import CommentInput from './components/CommentInput'
import CommentItem from './components/CommentItem'

export default class App extends PureComponent {
  constructor(props) {
    super(props)

    this.state = {
      comments: []
    }
  }

  render() {
    return (
      <div style={{width: '500px', padding: '20px'}}>
        App
        {
          this.state.comments.map((item, index) => {
            return <CommentItem key={item.id} comment={item} removeComment={ id => this.removeComment(index) }/>
          })
        }
        {/* <CommentInput submitComment={ this.submitComment.bind(this) }/> */}
        <CommentInput submitComment={ comment => this.submitComment(comment) }/>
      </div>
    )
  }

  submitComment(comment) {
    this.setState({
      comments: [...this.state.comments, comment]
    })
  }

  removeComment(index) {
    const newComments = [...this.state.comments]
    console.log(newComments.splice(index, 1))
    this.setState({
      comments: newComments
    })
  }
}